<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../docs/image3D.png">
    <script src="../../build/image3D.js"></script>
    <script src="../../node_modules/@hai2007/tool/dist/tool.js"></script>
    <title>纹理 - 立方体 | 测试</title>

    <!-- 顶点着色器 -->
    <script type='x-shader/x-vertex' id='vs'>
        attribute vec4 a_position;
        varying vec3 v_normal;
        uniform mat4 u_matrix;
        void main(){
            gl_Position=u_matrix * a_position;
            // 因为位置是以几何中心为原点的,可以用顶点坐标作为法向量
            v_normal=normalize(a_position.xyz);
        }
    </script>

    <!-- 片段着色器 -->
    <script type='x-shader/x-fragment' id='fs'>
        precision mediump float;
        varying vec3 v_normal;
        uniform samplerCube u_texture;
        void main(){
            gl_FragColor=textureCube(u_texture,normalize(v_normal));
        }
    </script>

</head>

<body>

    <h2>
        Tips:(请用服务器访问)你应该看见一个立方体在旋转！
    </h2>

    <canvas width=700 height=700>非常抱歉，您的浏览器不支持canvas!</canvas>

    <script>

        var core = image3D.core(document.getElementsByTagName('canvas')[0]);

        // 启用着色器
        core.shader(
            document.getElementById('vs').innerHTML,
            document.getElementById('fs').innerHTML
        );

        // 获取画笔并开启深度计算
        var painter = core.painter().openDeep();

        // 数据
        var data = new Float32Array([
            0.5, 0.5, 0.5,
            0.5, -0.5, 0.5,
            -0.5, -0.5, 0.5,
            -0.5, 0.5, 0.5,
            0.5, 0.5, -0.5,
            0.5, -0.5, -0.5,
            -0.5, -0.5, -0.5,
            -0.5, 0.5, -0.5
        ]);

        // 顶点索引数组
        var indexes = new Uint8Array([

            0, 1, 3, 1, 2, 3,
            4, 5, 6, 4, 6, 7,
            0, 4, 7, 0, 3, 7,
            1, 6, 5, 1, 2, 6,
            0, 1, 5, 0, 5, 4,
            2, 6, 7, 2, 3, 7

        ]);

        core.buffer().write(data).use('a_position', 3, 3, 0)

        core.buffer(true).write(indexes);

        // 创建纹理对象
        var texture = core.texture('cube');


        var image1 = new Image();
        image1.onload = function () {
            var image2 = new Image();
            image2.onload = function () {
                var image3 = new Image();
                image3.onload = function () {
                    var image4 = new Image();
                    image4.onload = function () {
                        var image5 = new Image();
                        image5.onload = function () {
                            var image6 = new Image();
                            image6.onload = function () {

                                texture.useCube([image1, image2, image3, image4, image5, image6], 175, 175);
                                core.setUniform1i('u_texture', texture);

                                tool.animation(function (deep) {

                                    core.setUniformMatrix4fv('u_matrix', tool.Matrix4().rotate(deep * Math.PI / 4 * (1 + 8), 1 - deep, deep, 0.5 - deep / 2).value());

                                    // 绘制
                                    painter.triangles(0, 36, 'byte');

                                }, 5000, function () {

                                    var preMatrix4 = tool.Matrix4().rotate(Math.PI / 4 * (1 + 8), 0, 1, 0).value();

                                    tool.animation(function (deep) {

                                        core.setUniformMatrix4fv('u_matrix', tool.Matrix4(preMatrix4).rotate(deep * Math.PI / 4 * (1 + 8), deep, 1 - deep, 0.5 - deep / 2).value());

                                        // 绘制
                                        painter.triangles(0, 36, 'byte');

                                    }, 5000);

                                });

                            };
                            image6.src = "../assets/skybox/front.jpg";
                        };
                        image5.src = "../assets/skybox/back.jpg";
                    };
                    image4.src = "../assets/skybox/bottom.jpg";
                };
                image3.src = "../assets/skybox/top.jpg";
            };
            image2.src = "../assets/skybox/left.jpg";
        };
        image1.src = "../assets/skybox/right.jpg";

    </script>

</body>

</html>
